<template>
	<view class="ssection">
		<view>
			<view :class="`ssection_title ${line ? 'line' : ''}`">{{title}}</view>
		</view>
		<view class="ssection_stitle" v-if="stitle">
			{{stitle}}
		</view>
		<view class="ssection_body">
			<slot></slot>
		</view>
	</view>
</template>

<script setup>
	/* 数据 */
	const {
		line,
		title,
		stitle
	} = defineProps({
		line: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: ""
		},
		stitle: {
			type: String,
			default: ""
		}
	})
</script>

<style lang="scss" scoped>
	.ssection {
		padding: 12px 10px;

		.ssection_title {
			position: relative;
			font-weight: bolder;
			font-size: 16px;

			&.line {
				padding-left: 10px;

				&:before {
					content: '';
					left: 0;
					width: 4px;
					top: 1px;
					bottom: 1px;
					background-color: rgb(0, 122, 255);
					display: block;
					position: absolute;
				}
			}
		}

		.ssection_stitle {
			font-size: 13px;
			color: rgb(0, 122, 255);
		}

		.ssection_body {
			padding-top: 10px;
			padding-left: 10px;
		}
	}
</style>